<nz-descriptions nzTitle="产品情况" nzBordered>
  <nz-descriptions-item nzTitle="Product">{{product?.productName}}</nz-descriptions-item>
  <nz-descriptions-item nzTitle="ID" [nzSpan]="2">{{product?.pid}}</nz-descriptions-item>
  <nz-descriptions-item nzTitle="Status">
    <nz-badge *ngIf="product?.enable === '1'" nzStatus="processing" nzText="Running"></nz-badge>
    <nz-badge *ngIf="product?.enable !== '1'" nzStatus="default" nzText="Stopped"></nz-badge>
  </nz-descriptions-item>
  <nz-descriptions-item nzTitle="相关项目数" [nzSpan]="2">{{projects.length|number}}</nz-descriptions-item>
  <nz-descriptions-item nzTitle="文档">
    {{product?.documentCount| number}}
  </nz-descriptions-item>
  <nz-descriptions-item nzTitle="SQL" [nzSpan]="2">
    {{product?.sqlCount| number}}
  </nz-descriptions-item>
  <nz-descriptions-item nzTitle="备注" [nzSpan]="3">
    <form nz-form [formGroup]="remarkForm" nzLayout="vertical">
      <nz-form-item>
        <nz-form-control>
          <nz-textarea-count [nzMaxCharacterCount]="remarkMaxLength">
            <textarea class="remark-textarea" rows="4" formControlName="remark" nzBorderless nz-input></textarea>
          </nz-textarea-count>
        </nz-form-control>
      </nz-form-item>
    </form>
    <button nz-button nzType="primary" [disabled]="!remarkForm.valid || !product?.pid"
            (click)="saveRemark()">保存
    </button>
  </nz-descriptions-item>
</nz-descriptions>
<nz-divider [nzText]="'相关项目'" [nzPlain]="true"></nz-divider>
<nz-table [nzData]="projects" [nzFrontPagination]="false" [nzLoading]="loadingProject" [nzLoadingDelay]="300"
          [nzScroll]="{y:'250px'}">
  <thead>
  <tr>
    <th [nzWidth]="'20%'"></th>
    <th [nzWidth]="'80%'"></th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let p of projects">
    <td>{{p.projectName}}</td>
    <td [nzEllipsis]="true" [nzTooltipTitle]="p.remark" nzTooltipTrigger="click" nzTooltipPlacement="top"
        nz-tooltip>{{p.remark}}</td>
  </tr>
  </tbody>
</nz-table>
